<template>
  <!-- 卡片详情 -->
  <div class="app-container">
    <el-card class="box-card">
      <div class="title">卡片操作</div>
      <el-row class="row">
        <el-button type="primary" @click="btnHandler('realname')">同步状态</el-button>
        <el-button type="primary" @click="btnHandler('remoteStatus')">同步语音</el-button>
        <el-button type="primary" @click="btnHandler('getCardFlow')">同步流量</el-button>

        <!-- <el-button v-if="!info.real_name_auth" type="success" @click="btnHandler('active')">允许实名</el-button> -->

        <el-button
          :loading="loading.status"
          :type="info.status === '正使用' ? 'danger' : 'success'"
          @click="btnHandler('switchStatus')"
          >{{ (info.status === '正使用' ? '停机' : '开机') + (loading.status ? '中...' : '') }}</el-button
        >
      </el-row>
    </el-card>
    <el-card class="box-card">
      <div class="title">卡片详情</div>
      <el-row class="row">
        <el-col :span="8">
          <span class="label">ICCID</span>
          <span class="content">{{ info.iccid }}</span>
        </el-col>
        <el-col :span="8">
          <span class="label">业务号码</span>
          <span class="content">{{ info.business_code }}</span>
        </el-col>
        <el-col :span="8">
          <span class="label">激活时间</span>
          <span class="content">{{ info.first_active_time }}</span>
        </el-col>
      </el-row>
      <el-row class="row">
        <el-col :span="8">
          <span class="label">是否激活</span>
          <span class="content">
            <el-tag v-if="info.card_status" type="success">已激活</el-tag>
            <el-tag v-if="!info.card_status" type="info">未激活</el-tag>
          </span>
        </el-col>
        <el-col :span="8">
          <span class="label">是否实名</span>
          <span class="content">
            <el-tag v-if="info.real_name_auth" type="success">已实名</el-tag>
            <el-tag v-if="!info.real_name_auth" type="info">未实名</el-tag>
          </span>
        </el-col>
        <el-col :span="8">
          <span class="label">状态同步时间</span>
          <span class="content">{{ info.status_sync_time }}</span>
        </el-col>
      </el-row>
      <el-row class="row">
        <el-col :span="8">
          <span class="label">本月语音（单位：分钟）</span>
          <span class="content"
            >已用{{ info.used_voice || 0 }}/剩余{{ info.rest_voice || 0 }}/总计{{ info.total_voice || 0 }}
          </span>
        </el-col>
        <el-col :span="8">
          <span class="label">本月流量（单位：MB）</span>
          <span class="content"
            >已用{{ info.used_flow_size || 0 }}/剩余{{ info.rest_flow || 0 }}/总计{{ info.total_flow || 0 }}</span
          >
        </el-col>
        <el-col :span="8">
          <span class="label">批次号</span>
          <span class="content">{{ info.batch }}</span>
        </el-col>
      </el-row>
      <el-row class="row">
        <el-col :span="8">
          <span class="label">停复</span>
          <span class="content">
            <el-tag :type="info.status === '正使用' || info.status === '正常使用' ? 'success' : 'danger'">{{
              info.status || '未知'
            }}</el-tag>
          </span>
        </el-col>
        <el-col :span="8">
          <span class="label">语音</span>
          <span class="content">
            <el-tag :type="info.voice_open === 2 ? 'danger' : 'success'">{{
              info.voice_open === 2 ? '停用' : '启用'
            }}</el-tag>
          </span>
        </el-col>
        <el-col :span="8">
          <span class="label">流量</span>
          <span class="content">
            <el-tag :type="info.flow_open === 2 ? 'danger' : 'success'">{{
              info.flow_open === 2 ? '停用' : '启用'
            }}</el-tag>
          </span>
        </el-col>
      </el-row>
      <el-row class="row">
        <el-col :span="8">
          <span class="label">划拨</span>
          <span class="content">
            <el-tag :type="info.assign_status === 1 ? 'success' : 'info'">{{
              info.assign_status === 1 ? '已划拨' : '未划拨'
            }}</el-tag>
          </span>
        </el-col>
        <el-col :span="8">
          <span class="label">关联手机号</span>
          <span class="content">{{ info.relate_mobile }}</span>
        </el-col>
        <el-col :span="8">
          <span class="label">运营商</span>
          <span class="content" v-if="info.operator === 1">中国移动</span>
          <span class="content" v-if="info.operator === 2">中国联通</span>
          <span class="content" v-if="info.operator === 3">中国电信</span>
        </el-col>
      </el-row>
      <el-row class="row">
        <el-col :span="8">
          <span class="label">所属代理商</span>
          <span class="content">{{ allAgent.find((e) => e.id === info.agent).name }}</span>
        </el-col>
        <!-- TODO: -->
      </el-row>
    </el-card>
    <el-card class="box-card">
      <div class="title">已购套餐</div>
      <el-table :data="info.meal_used" style="width: 100%">
        <el-table-column label="套餐名称">
          <template slot-scope="scope">{{
            `${scope.row.meal_info.name}/${scope.row.meal_info.call_mins}分钟/${
              scope.row.meal_info.flow ? scope.row.meal_info.flow + 'M' : '无限流量'
            }`
          }}</template>
        </el-table-column>
        <el-table-column label="套餐开始时间">
          <template slot-scope="scope">{{ scope.row.start_time }}</template>
        </el-table-column>
        <el-table-column label="套餐结束时间">
          <template slot-scope="scope">{{ scope.row.end_time }}</template>
        </el-table-column>
        <el-table-column prop="order_id" label="购买订单号"></el-table-column>
      </el-table>
    </el-card>
    <el-card v-if="info.package_used && info.package_used.length" class="box-card">
      <div class="title">已购加油包</div>
      <el-table :data="info.package_used" style="width: 100%">
        <el-table-column label="加油包名称">
          <template slot-scope="scope">{{
            `${scope.row.package_info.name}/${scope.row.package_info.voice}分钟/${scope.row.package_info.flow + 'M'}`
          }}</template>
        </el-table-column>
        <el-table-column label="加油包开始时间">
          <template slot-scope="scope">{{ scope.row.start_time }}</template>
        </el-table-column>
        <el-table-column label="加油包结束时间">
          <template slot-scope="scope">{{ scope.row.end_time }}</template>
        </el-table-column>
        <el-table-column prop="order_id" label="购买订单号"></el-table-column>
      </el-table>
    </el-card>
    <el-card class="box-card">
      <div class="title">可销售套餐</div>
      <el-table :data="info.meals" style="width: 100%">
        <el-table-column label="套餐名称">
          <template slot-scope="scope">{{
            `${scope.row.meal.name}/${scope.row.meal.call_mins}分钟/${
              scope.row.meal.flow ? scope.row.meal.flow + 'M' : '无限流量'
            }`
          }}</template>
        </el-table-column>

        <el-table-column
          v-for="(item, index) in info.meals && info.meals[0] && info.meals[0].tier"
          :key="index"
          :label="item.name + '成本价'"
        >
          <template slot-scope="scope">{{ scope.row.tier[index].cost }}</template>
        </el-table-column>

        <el-table-column prop="meal.meal_price" label="套餐售价"></el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
import { getInfo, cardActive, getCardRemoteStatus, isRealname, getCardFlow, switchStatus } from '@/api/card';
import { mapGetters } from 'vuex';
import { Message } from 'element-ui';
import { sleep } from '@/utils/global';
export default {
  data() {
    return {
      id: this.$route.params.id,
      info: {},

      loading: {
        status: false,
      },
    };
  },
  computed: {
    ...mapGetters(['allAgent']),
  },
  created() {
    this.fetchData();
  },
  methods: {
    async btnHandler(type) {
      if (type === 'active') {
        const res = await cardActive(this.info.business_code);
        Message.success(res.msg);
        return;
      }

      if (type === 'remoteStatus') {
        const res = await getCardRemoteStatus(this.info.business_code);
        Message.success(res.msg);
        this.fetchData();
        return;
      }

      if (type === 'getCardFlow') {
        const res = await getCardFlow(this.info.business_code);
        Message.success(res.msg);
        this.fetchData();
        return;
      }

      if (type === 'realname') {
        const res = await isRealname(this.info.business_code);
        Message.success(res.msg);
        this.fetchData();
        return;
      }

      if (type === 'switchStatus') {
        this.loading.status = true;
        const res = await switchStatus(this.info.business_code, this.info.status === '正使用' ? 1 : 2);
        await sleep(5000);
        await isRealname(this.info.business_code);
        this.loading.status = false;
        Message.success(res.msg);
        this.fetchData();
        return;
      }
    },
    async fetchData() {
      const res = await getInfo({ id: this.id });

      res.data.meals = res.data.meals.map((e) => {
        if (e.tier) {
          e.tier = JSON.parse(e.tier).map((t) => ({
            ...t,
            name: this.allAgent.find((e) => e.id == t.agent_id).name,
          }));
        }

        return e;
      });
      this.info = res.data;
    },
  },
};
</script>
<style scoped lang="scss">
.box-card {
  margin-bottom: 20px;

  .title {
    font-size: 18px;
    font-weight: 600;
    margin: 10px 0 20px;
  }

  .row {
    margin: 10px 0;
    font-size: 14px;
    display: flex;
    align-items: center;

    .label {
      &::after {
        content: ':';
        position: relative;
        top: -0.5px;
        margin: 0 8px 0 2px;
      }
    }
  }
}
</style>
